<template>
	<uni-nav-bar shadow left-icon="left" leftText="返回" rightText="保存" title="修改个人资料" @clickLeft="back" @clickRight="modifyUserInfoNow" />
	<view class="profile-edit">
		<view class="main-content">
			<view class="avatar-section">
				<!-- 点击头像触发上传事件 -->
				<view class="avatar-container" @click="uploadAvatar">
					<ImgVue class="avatar-image" :src="modifyForm.avatar" />
					<view class="camera-btn">
						<uni-icons type="camera-filled" size="14" color="#FFFFFF" />
					</view>
				</view>
				<text class="change-avatar-text">更换头像</text>
			</view>
			<view class="form-section">
				<view class="form-item">
					<text class="label">昵称</text>
					<input type="text" class="input" placeholder="请输入昵称" v-model="modifyForm.nickname" />
				</view>
				<view class="form-item">
					<text class="label">邮箱</text>
					<input type="text" class="input" placeholder="请输入邮箱" v-model="modifyForm.email" />
				</view>
				<view class="form-item">
					<text class="label">手机号码</text>
					<input type="text" class="input" v-model="modifyForm.phone" />
				</view>
			</view>
		</view>
		<button class="logout-btn" @click="logout">退出登录</button>
	</view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getUserIdFromToken } from '../../util/util';
import { getUserInfo, modifyUserInfo,uploadAvatarFile } from '../../api/user'; // 添加 uploadAvatarFile 方法
import ImgVue from '../../components/Img/Img.vue';

// 表单数据
const modifyForm = ref({
	email: '',
	nickname: '',
	phone: '',
	avatar: '', // 头像地址
});

// 返回上一页
const back = () => {
	uni.navigateBack({
		delta: 1,
	});
};

// 获取用户数据
const fetchUserData = async () => {
	try {
		const response = await getUserInfo();
		modifyForm.value = response.data;
	} catch (error) {
		console.error('请求用户数据时出错:', error);
	}
};

// 点击保存按钮修改用户信息
const modifyUserInfoNow = async () => {
	console.log(modifyForm.value);
	const response = await modifyUserInfo(modifyForm.value);
	console.log(response);
	if (response.code === 200) {
		uni.showToast({
			title: '保存成功',
			icon: 'success',
		});
	} else {
		uni.showToast({
			title: '保存失败，请重试',
			icon: 'none',
		});
	}
};

// 点击头像上传图片
const uploadAvatar = () => {
	uni.chooseImage({
		count: 1, // 限制只能选择一张图片
		success: async (res) => {
			const filePath = res.tempFilePaths[0];
			try {
				// 上传文件到服务器
				const uploadResponse = await uploadAvatarFile(filePath);
				modifyForm.value.avatar = uploadResponse.data
				if (uploadResponse.code === 200) {
					// 更新头像地址
					modifyForm.value.avatar = uploadResponse.data;
					console.log(modifyForm.value.avatar)
					uni.showToast({
						title: '头像上传成功',
						icon: 'success',
					});
				} else {
					uni.showToast({
						title: '头像上传失败，请重试',
						icon: 'none',
					});
				}
			} catch (error) {
				console.error('头像上传失败:', error);
				uni.showToast({
					title: '头像上传失败，请检查网络',
					icon: 'none',
				});
			}
		},
	});
};

// 退出登录
const logout = () => {
	// 清除 token 并跳转到登录页面
	uni.removeStorageSync('token');
	uni.redirectTo({
		url: '/pages/login/login',
	});
};

// 页面加载时获取用户数据
onMounted(async () => {
	const token = uni.getStorageSync('token');
	if (token) {
		const id = getUserIdFromToken();
		if (id) {
			fetchUserData();
		} else {
			console.error('无法从 token 中解析出用户 ID');
		}
	}
});
</script>

<style scoped>
	page {
		height: 100%;
	}

	.profile-edit {
		width: 750rpx;
		min-height: 100%;
		background: #FFFFFF;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #F5F5F5;
		z-index: 100;
	}

	.back-icon {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
	}

	.nav-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.save-btn {
		font-size: 14px;
		color: #4A90E2;
		background: none;
		border: none;
		padding: 0;
	}

	.main-content {
		padding: 120rpx 2.03125rem 40rpx;
	}

	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 64rpx;
	}

	.avatar-container {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 24rpx;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.camera-btn {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 56rpx;
		height: 56rpx;
		background: #4A90E2;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.change-avatar-text {
		font-size: 14px;
		color: #4A90E2;
	}

	.form-section {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
	}

	.form-item {
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #999999;
		margin-bottom: 8rpx;
	}

	.input {
		width: 100%;
		padding: 16rpx 0;
		font-size: 14px;
		color: #333333;
		text-align: right;
	}

	.location-selector {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 0;
	}

	.location-text {
		font-size: 14px;
		color: #333333;
	}

	.textarea {
		width: 100%;
		height: 160rpx;
		padding: 16rpx;
		font-size: 14px;
		color: #333333;
		background: #FFFFFF;
		border: 2rpx solid #EEEEEE;
		border-radius: 8rpx;
	}

	.logout-btn {
		margin: 80rpx 32rpx;
		width: calc(100% - 64rpx);
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 16px;
		color: #FFFFFF;
		background: linear-gradient(135deg, #FF6B6B 0%, #FF4D4F 100%);
		border: none;
		border-radius: 44rpx;
		box-shadow: 0 8rpx 16rpx rgba(255, 77, 79, 0.2);
		transition: all 0.3s ease;
	}
</style>